I am trying to filter a div, and it is giving style="sidplay:none" to all elements which are not in search result and it is working fine, but the attribute is not hiding the element!
Image here (direct image not available for me)
my code
WikiOption.Elements.searchInput.on("input", (thisx)=> {
var val = $(thisx.target).val();
$(".toc-wrap h3").each(function () {
$(this).toggle($(this).text().toLowerCase().includes(val));
});
});
.toggle() isn't the right method to use in your case. If the next input event fires and a <h3> matches again, then it would change back to it's former state. Use if/else statements and .show() and .hide() methods.
Also, input event doesn't trigger if you Backspace and leave the <input> empty, so a keyup event handler is added.
$('.search').on('input', function(e) {
const txt = $(e.target).val().toLowerCase();
$('.toc-wrap h3').each(function() {
if ($(this).text().toLowerCase().includes(txt)) {
$(this).show();
} else {
$(this).hide();
}
});
});
$('.search').on('keyup', function(e) {
if (e.keyCode === 8 && $(this).val() === '') {
$('.toc-wrap h3').hide();
}
});h3 {
display: none
}<input class='search' type='search'>
<article class='toc-wrap'>
<h3>ABCDEFGHIJ</h3>
<h3>klmnopqrst</h3>
<h3>uvwxyz</h3>
<h3>aAbBcC</h3>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>